<!DOCTYPE html>
<html lang="en">
<head>
	<title>snake</title>
	<style>
		*{
			font-family:"微软雅黑";
		}
		#map{
			width:600px;
			height:600px;
			background-color:CadetBlue;
			position:absolute;
			overflow:hidden;
		}
		input{
			width:auto;
			height:auto;
			padding:5px;
			background-color:CadetBlue;
			color:white;
			margin:10px 0;
		}
		#operate{
			position:absolute;
			right:20%;
			top:20%;
		}
		td button{
			width:50px;
			height:50px;
			font-size:30px;
		}
	</style>
</head>
<body onkeydown="control(event);">
	<input type="button" id="start_btn" onclick="start();test(this);" value="开始游戏"/>
	<span>得分:</span><span id="goal"></span>
	<div id ="map"></div>
	<div id ="operate">
		<table>
			<tr>
				<td></td>
				<td><button id="up" value="38">↑</button></td>
				<td></td>
			</tr>
			<tr>
				<td><button id="left" value="37">←</button></td>
				<td></td>
				<td><button id="right" value="39">→</button></td>
			</tr>
			<tr>
				<td></td>
				<td><button id="down" value="40">↓</button></td>
				<td></td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript" src="js/msg.js"></script>
<script>
	var map = document.getElementById("map");//地图
	var snakes = [];//蛇关节
	var direction = "right";//蛇移动方向
	var step_x = 20;
	var step_y = 0;
 	var timer;//定时器
	//开始按钮点击一次后失效
	function test(e){
		e.disabled = true;
		e.value = "游戏进行中";
	}
	
	//开始
	function start(){
		//游戏开始，蛇头放到数组的第一项
        for(var i = 2; i>=0;i--){
            drowSnake(i);//循环画出3节蛇身
        }
		moveSnake();
		food();
		eat();
		overDiv()
	}
	//画蛇
	function drowSnake(num){
		var snakeBody = document.createElement('div');//创建蛇
		snakeBody.style.position = "absolute";
		snakeBody.style.left = num * 20 + "px";//蛇开始的x坐标
		snakeBody.style.top = "0px";//蛇开始的y坐标
		snakeBody.style.background = "black";//蛇颜色
		snakeBody.style.width = "20px";//蛇长
		snakeBody.style.height = "20px";//蛇宽
		snakes.push(snakeBody);//蛇身加入数组
		map.appendChild(snakeBody);//画蛇
	}
	//让蛇移动
	function moveSnake(){
		//蛇尾 的位置等于 上一个
        for(var i=snakes.length-1;i>0;i--){
            snakes[i].style.left = snakes[i-1].style.left;
            snakes[i].style.top = snakes[i-1].style.top;
        }
		snakes[0].style.left = parseInt(snakes[0].style.left) + step_x + "px";//因为坐标值为数字加px，为字符串，所以需要转换成整数才能相加
		snakes[0].style.top = parseInt(snakes[0].style.top) + step_y + "px";//
		var fenshu = document.getElementById("goal").value;
		timer = setTimeout("moveSnake()",400);
	}
	function clearTime(){
		clearTimeout(timer);
		moveSnake();
	}
	//产生食物
	function food(){
		var food_x = Math.floor(Math.random() * 29 + 1 ) * 20 + "px";//随机产生食物坐标
		var food_y = Math.floor(Math.random() * 29 + 1 ) * 20 + "px";
		var food_div = document.createElement('div');//创建食物
		food_div.style.position = "absolute";
		food_div.style.left = food_x;
		food_div.style.top = food_y;
		food_div.style.background = "gray";
		food_div.style.width = "20px";
		food_div.style.height = "20px";
		food_div.id = "food_id";
		map.appendChild(food_div);
	}
	//吃食物
	function eat(){
		//得到蛇头坐标
		var x1 = parseInt(snakes[0].style.left);
		var y1 = parseInt(snakes[0].style.top);
		
		//得到食物坐标
		var i_food = document.getElementById("food_id");
		var x2 = parseInt(i_food.style.left); 
		var y2 = parseInt(i_food.style.top); 
		
		if(Math.abs(x1-x2) < 20 && Math.abs(y1-y2) < 20){
			snakes.push(i_food);
			i_food.id = "";
			food();
		}
		setTimeout("eat()",30);
	}
	//判断是否碰到墙壁
    function overDiv(){         
        //计算得分
        var goal = document.getElementById("goal");
        goal.innerHTML = (snakes.length-3)*10;//减去初始的3节蛇身，吃一个食物分数乘10       
        var x = parseInt(snakes[0].style.left); //snakes[0]代表蛇头
        var y = parseInt(snakes[0].style.top);
                     
        //判断是否碰到墙壁
        if(x<0||x>580||y<0||y>580){
			alert("Game over");
			window.location.reload();
        }
                     
        //判断是否吃到自己
        if(snakes.length > 4){
            for(var i=3;i<snakes.length-1;i++){
                var x1 = parseInt(snakes[i].style.left);
                var y1 = parseInt(snakes[i].style.top);        
                if(x==x1 && y==y1){
					alert("Game over");
					window.location.reload();
                }
            }
		}
		setTimeout("overDiv()",30);
    }
	
	//键盘控制
	function control(event){
		var n = event.keyCode;//获取按键值，37：左，38：上，39：右，40：下
		switch(n){
			case 37://蛇向右跑，左键不起用
				if(direction == "right"){
					break;
				}else{
					step_x = -20;
					step_y = 0;
					direction = "left";
				}
				clearTime();
				break;
			case 38://蛇向下，上键不起用
				if(direction == "down"){
					break;
				}else{
					step_x = 0;
					step_y = -20;
					direction = "up";
				}
				clearTime();
			break;
			case 39://蛇向左，右键不起用
				if(direction == "left"){
					break;
				}else{
					step_x = 20;
					step_y = 0;
					direction = "right";
				}
				clearTime();
			break;
			case 40://蛇向上，下键不起用
				if(direction == "up"){
					break;
				}else{
					step_x = 0;
					step_y = 20;
					direction = "down";
				}
				clearTime();
			break;
		}
	}
		var btn_left = document.getElementById("left");
		var btn_right = document.getElementById("right");
		var btn_up = document.getElementById("up");
		var btn_down = document.getElementById("down");
		btn_left.onclick = function(){
			if(direction == "right"){
				return;
			}else{
				step_x = -20;
				step_y = 0;
				direction = "left";
			}
			//clearTime();
		}
		btn_up.onclick = function(){
			if(direction == "down"){
				return;
			}else{
				step_x = 0;
				step_y = -20;
				direction = "up";
			}
			//clearTime();
		}
		btn_right.onclick = function(){
			if(direction == "left"){
				return;
			}else{
				step_x = 20;
				step_y = 0;
				direction = "right";
			}
			//clearTime();
		}
		btn_down.onclick = function(){
			if(direction == "up"){
				return;
			}else{
				step_x = 0;
				step_y = 20;
				direction = "down";
			}
			//clearTime();
		}
</script>
</html>